<template>
  <el-dialog
    title="设施列表"
    :visible.sync="isVisible"
    :width="width"
    :before-close="handleClose"
    :lock-scroll="true"
    :close-on-click-modal="false"
    custom-class="pub_dialog"
    @open="getData"
  >
    <div class="table-all">
      <!-- 搜索区 -->
      <div class="app-container search-box">
        <SearchForm
          :form="searchData.form"
          :options="searchData.options"
          @searchUpdate="search"
          @resetSearchData="resetSearchData"
        ></SearchForm>
      </div>
      <!-- 按钮区 -->
      <div class="app-container table-box">
        <div class="table-main">
          <!-- 表格 -->
          <v-table
            :table-columns="tableColumns"
            :table-data="tableData"
            :loading="loading"
            :is-index="true"
            ref="table"
            :needComputedHeight="false"
            height="295px"
            >
          </v-table>
        </div>
        <div class="table-page">
          <!-- 页码 -->
          <pagination v-show="total>0" :total="total" :page.sync="pageNum" :limit.sync="pageSize"
                      @pagination="search"/>
        </div>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="cancel">关 闭</el-button>
    </span>
  </el-dialog>
</template>

<script>
  import {
    alarmFacilityPage,
    alarmFacilityExport,
    alarmFacilityDelete
  } from '@/api/alarm/facility'
  import SearchForm from '@/components/searchForm'
  import ButtonForm from '@/components/ButtonForm'
  import VTable from '@/components/VTable'
  import Pagination from '@/components/Pagination'
  import {alarmFacilityTypeList} from "@/api/alarm/alarmFacilityType";

  export default {
    components: {
      VTable, Pagination, SearchForm, ButtonForm
    },
    props: {
      width: {
        type: String,
        default: "70%",
      },
      modeType: {
        type: String,
      },
      dialogVisible: {
        type: Boolean,
        default: false
      }
    },
    watch: {
      // 字典
      'typeOptions': {
        handler(newVal, oldVal) {
          this.searchData.options.forEach(t => {
            if (t.key == 'type') {
              t.option.data = newVal
            }
          })
        },
        deep: true,
        immediate: true
      },
      'modeType': {
        handler(newVal, oldVal) {
          this.searchData.form.modeType = newVal;
        },
        deep: true,
        immediate: true
      }
    },
    computed: {
      isVisible: {
        get() {
          return this.dialogVisible
        },
        set() {
          this.close()
        }
      }
    },
    data() {
      return {
        tableColumns: [
          {
            prop: 'facilityTypeCode',
            label: '设施类型代码',
            minWidth: '150',
            slotname: 'facilityTypeCode',
            options: {}
          },
          {
            prop: 'name',
            label: '设施名称',
            minWidth: '150',
            slotname: 'name',
            options: {}
          },
          {
            prop: 'facilityName',
            label: '设施类型',
            minWidth: '150',
            slotname: 'type',
            options: {}
          },
          {
            prop: 'address',
            label: '设施地址',
            minWidth: '150',
            slotname: 'address',
            options: {}
          },
          {
            prop: 'unitName',
            label: '所属单位',
            minWidth: '150',
            slotname: 'unitName',
            options: {}
          },
          {
            prop: 'linkName',
            label: '联系人',
            minWidth: '150',
            slotname: 'linkName',
            options: {}
          },
          {
            prop: 'phone',
            label: '联系电话',
            minWidth: '150',
            slotname: 'phone',
            options: {}
          },
          {
            prop: 'areaCode',
            label: '区域',
            minWidth: '150',
            slotname: 'areaCode',
            options: {}
          },
          {
            prop: 'updateTime',
            label: '更新时间',
            minWidth: '150',
            slotname: 'updateTime',
            options: {}
          },
        ],
        tableData: [],
        selection: [],
        loading: false,
        total: 1,
        pageNum: 1,
        pageSize: 10,
        searchData: {
          form: {
            modeType: this.modeType,
            name: '',
            type: '',
            address: '',
            linkName: '',
            phone: '',
            provinceCode: '',
            cityCode: '',
            countyCode: '',
            areaCode: '',
            selectAreaCode: [],
          },
          options: [
            {
              title: '设施名称',
              key: "name",
              type: "text",
            },
            {
              title: '设施类型',
              key: "type",
              type: "select",
              multiple: false,
              option: {
                data: this.typeOptions,
                props: {
                  key: "id", // 指定key对应data的字段
                  label: "name", // 指定label对应data的字段
                  value: "id", // 指定value对应data的字段
                },
              },
            },
            {
              title: '设施位置',
              key: "address",
              type: "text",
            },
            {
              title: '联系人',
              key: "linkName",
              type: "text",
            },
            // {
            //   title: "区域",
            //   key: "selectAreaCode",
            //   type: "gdAreaSelect",
            //   changeFn: this.searchAreacodeHandle, //如需对区域数据做更多的处理，可在这里定义方法
            // },
          ]
        },
        typeOptions: [],
        facilityTypeOptions: [],
        tableMainHeight: 0,
      };
    },
    methods: {
      cancel() {
        this.close()
      },
      handleClose(done) {
        done()
        this.close()
      },
      close() {
        this.$emit('close')
      },
      getData() {
        this.resetSearchData()
        this.getAlarmFacilityTypeList()
        this.search()
      },
      search() {
        this.fetch({
          ...this.searchData.form,
        })
      },
      getAlarmFacilityTypeList(){
        alarmFacilityTypeList({"type": this.modeType.replace('ALARM_', 'SSLX_')}).then(res => {
          if (res.code == 200) {
            this.typeOptions = res.data
          } else {
            this.$message({
              message: this.$t('tips.systemException'),
              type: 'error'
            })
          }
        });
      },
      fetch(params = {}) {
        params.pageSize = this.pageSize
        params.pageNum = this.pageNum
        this.loading = true
        params.modeType = this.modeType
        params.areaCodeFormat = this.$store.state.account.user.deptIds
        alarmFacilityPage(params).then(async res => {
          if (res.code == 200) {
            this.total = res.data.total
            let rows = res.data.rows
            for (let item of rows) {
              item.areaCode = await this.$commonJs.getGzAreaName(item.provinceCode, item.cityCode, item.countyCode)
            }
            this.tableData = rows
          } else {
            this.$message({
              message: this.$t('tips.systemException'),
              type: 'error'
            })
          }
        }).finally(final => {
          this.loading = false
        })
      },
      // 重置搜索条件
      resetSearchData() {
        this.searchData.form = {
          modeType: this.modeType,
          name: '',
          type: '',
          address: '',
          linkName: '',
          phone: '',
          provinceCode: '',
          cityCode: '',
          countyCode: '',
          areaCode: '',
        }
      },
    },
    mounted() {

    },
  };
</script>

<style lang="scss" scoped>
  .table-all {
    display: flex;
    flex-direction: column;
    height: 100%;

    .search-box {
      padding-bottom: 6px;
    }

    .table-box {
      padding-top: 10px;
      flex: 1;
      display: flex;
      flex-direction: column;

      .table-main {
        flex: 1;
        overflow: auto;
      }

      .table-page {
        // padding-top: 10 px;
        // padding-bottom: 10 px;
      }

      ::v-deep .pagination-container {
        text-align: right;
      }

    }
  }
</style>
